let changeJson = {};
export default function (id, data) {
    console.log(id)
    window.nbasics.differAction(() => {
        let idContent = document.getElementById(id);
        idContent.onclick = () => {
            document.querySelector('.hiddenContent').style.display = 'none'
        }
        idContent['dynamicSearch'] = function (value) {
            let values = value.values;
            let displayContent = document.querySelector('.' + values.callName.value)
            let contentString = '';
            if (values[values.callName.value] && values[values.callName.value].listValue) {
                values[values.callName.value].listValue.forEach((item, i) => {
                    contentString += `<div class="hiddenContentItem" index="${i}">${item.values[displayContent.getAttribute('content')].value}</div>`
                })
            }
            displayContent.style.display = 'block';
            displayContent.innerHTML = contentString;
            let hiddenContentItem = document.querySelectorAll('.hiddenContentItem');
            console.log(hiddenContentItem)
            hiddenContentItem.forEach(item => {
                item.onclick = () => {
                    displayContent.previousElementSibling.value = item.innerHTML;
                    displayContent.style.display = 'none';
                    changeJson[displayContent.previousElementSibling.getAttribute('name')] = {
                        type: 'SUB',
                        sub: values[values.callName.value].listValue[parseInt(item.getAttribute('index'))].values
                    };
                    console.log(changeJson)
                }
            })
        }
    })
    console.log("IN inputForm with " + JSON.stringify(data))

    return `<div id="${id}" style="padding: 0 0.267rem;font-size: 0.4rem;">` + style + buildRecord(id + '-top', data) + `</div>`;
}

function buildRecord(id, record) {

    let result = `<div class="label">${record.name} : </div>`
    let inputResult = ``;
    if (record.fields) {
        record.fields.forEach(i => {
            i.valueSelection = i.valueSelection ? i.valueSelection : '';
            i.dynamic = i.dynamic ? i.dynamic : ''
            inputResult += buildSimple(id + i.name, i.name, i.value, i.type, i.valueSelection, i.dynamic)
        });
    }
    result += `<div>${inputResult}</div>`
    let btnResult = ''
    if (record.savePath) {
        btnResult += buildButton(id + "-save", "edit", record.savePath);
    }
    if (record.cancelPath) {
        btnResult += buildButton(id + "-cancel", "delete", record.cancelPath);
    }
    if (record.insertPath) {
        btnResult += buildButton(id + "-insert", "insert", record.insertPath);
    }
    result += btnResult;
    return result;
}

function buildSimple(id, label, value, type, valueSelection, dynamic) {
    console.log(dynamic)
    let inputString = ``;
    switch (type) {
        case 'BOOLEAN':
            inputString = `<input type="checkbox" class="show-text checke " style="outline: none" name="${label}" ${value === "true" ? 'checked' : ''}>`;
            break;
        case 'TEXT':
            inputString = `<textarea  style="height: 3rem;width: 5.7rem" class="show-text stringInput ">${value ? value : ''}</textarea>`;
            break;
        default:
            // inputString = `<input type="text" class="show-text stringInput" id="${id}" name="${label}" value="${value?value:''}">`;
            if (valueSelection !== '') {
                let optionString = '';
//                valueSelection = valueSelection.splice(valueSelection.indexOf(value),1);
                valueSelection.forEach(item => {
                    optionString += `<option>${item}</option>`;
                })
                inputString = `
                                <select class="show-text stringInput" name="${label}">
                                    <option>${value ? value : ''}</option>
                                    ${optionString}
                                </select>
                              `
            } else {
                inputString = `<input type="text" class="show-text stringInput ${dynamic !== '' ? label + 'dynamic' : ''}" path="${dynamic !== '' ? dynamic.path : ''}" name="${label}" id="${id}" name="${label}" value="${value ? value : ''}">`;
                if (dynamic !== '') {
                    inputString = `<div style="position: relative;display: inline-block">
                                        ${inputString}
                                        <div class="${dynamic.callName} hiddenContent" content="${dynamic.displayField}"></div>
                                    </div>`
                }
            }
    }
    let result = (label ? `<span class="show-label">${label}</span>` : "Unnamed")
        + inputString;
    result = `<div style="margin-bottom: 0.8rem;font-size: 0.16rem;position: relative">${result}</div>`
    if (dynamic !== '') {
        window.nbasics.differAction(() => {
            let dymaicInput = document.querySelector('.' + label + 'dynamic');
            dymaicInput.oninput = () => {
                window.nbasics.touchBack({
                    path: dynamic.path,
                    data: JSON.stringify({callName: dynamic.callName, searchString: dymaicInput.value})
                })
            }
            dymaicInput.onfocus = () => {
                window.nbasics.touchBack({
                    path: dynamic.path,
                    data: JSON.stringify({callName: dynamic.callName, searchString: dymaicInput.value})
                })
            }
            dymaicInput.onclick = () => {
                window.event ? window.event.cancelBubble = true : e.stopPropagation();
            }
        })
    }
    return result
}

function buildBlank(id, label) {
    return `<div class="show-label">Unsupported: ${label}</div>`
}

function buildButton(id, clazz, path) {
    window.nbasics.differAction(() => {
        if (clazz === 'edit') {
            document.getElementById(id).onclick = () => {
                let keyDom = document.querySelectorAll('.show-text');
                let postJson = {}
                console.log(keyDom)
                keyDom.forEach((item) => {
                    if (item.getAttribute("type") === 'text') {
                        postJson[item.getAttribute("name")] = {type: "STRING", value: item.value}
                        if (changeJson[item.getAttribute("name")]) {
                            postJson[item.getAttribute("name")] = changeJson[item.getAttribute("name")];
                        }
                    } else if (item.getAttribute("type") === 'checkbox') {
                        console.log(item.checked)
                        postJson[item.getAttribute("name")] = {type: "BOOLEAN", value: item.checked}
                    } else {
                        postJson[item.getAttribute("name")] = {type: "STRING", value: item.value}
                    }
                })
                console.log(postJson);
                let dataJson = {values: postJson}
                window.nbasics.touchBack({path: path, data: JSON.stringify(dataJson)})
            }
        } else {
            console.log(path)
            document.getElementById(id).onclick = () => {
                window.nbasics.touchBack({path: path, data: JSON.stringify({})})
            }
        }
    });
    return `<div id="${id}" class="submitBtn">${clazz === 'edit' ? '保存' : '取消'}</div>`
}

let style = `
                <style>
                .topWrap{
                    height: 0.8rem;
                }
                .submitBtn{
                 background: #008be6;
                        color: white;
                        border: none;
                        width: 80%;
                        height: 0.8rem;
                        font-size: 0.4rem;
                        border-radius: 0.133rem;
                        margin: 0.2rem auto;
                        text-align: center;
                        line-height: 0.8rem;
                }
                .checke{
                    position: relative;
                    -webkit-appearance: none;
                    width:60px;
                    height: 30px;
                    line-height: 30px;
                    background: #eee;
                    border-radius: 30px;
                    outline: none;
                }
                .checke:before{
                    position: absolute;
                    left: 0;
                    content: '';
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background: #eee;
                    box-shadow: 0px 0px 5px #ddd;
                    transition: all 0.2s linear;
                }
         
                .checke:checked{
                   background: #008be6;
                   outline: none;
                }
                .checke:checked:before{
                    left: 30px;
                    transition: all 0.2s linear;
                }
                    body{
                        background: white;
                    }
                    .label{
                        font-size: 0.333rem;
                    }
                    .editwrap{
                        height: 0.8rem;
                        line-height: 0.8rem;
                        margin-bottom: 0.133rem;
                        float: left;
                    }
                      .stringInput{
                         border: 0.013rem solid #E6E6E6;
                         background: white;
                         box-sizing: border-box;
                         padding-left: 0.207rem;  
                         height: 0.8rem;
                         width: 5.667rem;
                         font-size: 0.4rem;
                         position:relative;
                    }
                    .hiddenContent{
                        position: absolute;
                        top: 0.8rem;
                        max-height: 3rem;
                        width: 5.667rem;
                        border: 1px solid #E6E6E6;
                        border-top: none;
                        display: none;
                        z-index: 999;
                        overflow: auto;
                        background: white;
                    }
                    .hiddenContentItem{
                        width: 5.667rem;
                        height: 0.8rem;
                        font-size: 0.16rem;
                        border-bottom: 1px solid #E6E6E6;
                        line-height: 0.8rem;
                        text-align: center;
                    }
                    .show-label{
                         display: inline-block;
                         width: 1.8rem;
                         height: 0.8rem;
                         font-size: 0.4rem;
                         margin-right: 0.133rem;
                         float: left;
                         vertical-align: top;
                       }
                    .show-text{
                        display: inline-block;
                        height: 0.8rem;
                        line-height: 0.8rem;
                    }
                    .show-text input{
                     border: 0.013rem solid #353535;
                     background: white;
                     border-radius: 0.08rem ; 
                     box-sizing: border-box;
                     padding-left: 0.067rem;  
                     font-size: 0.4rem;
                    }
                    .valueWrap{
                     height: 0.8rem;
                     line-height: 0.8rem;
                    }
                    .resultWrap{
                     overflow: hidden;
                     margin-top: 0.067rem;
                     width: 100%;
                    }
                   
                   .add{
                    width: 0.667rem;
                    height: 0.667rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/addPen.png") center no-repeat;
                    background-size: 80% 80%;
                    float: left;
                    font-size: 0.133rem;
                    margin-right: 0.08rem;
                   }
                   .addAtHead{
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-top: 0.25rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/numberincrease@2x.png");
                    background-size: 100%;
                    float: left;
                    font-size: 0.133rem;
                    margin-right: 0.08rem;
                   }
                 
                   .delete{
                    width: 0.667rem;
                    height: 0.667rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/deletePen.png") center no-repeat;
                    background-size: 80% 80%;
                    float: left;
                    font-size: 0.133rem;
                    margin-right: 0.08rem;
                   }
                   .edit{
                    width: 0.667rem;
                    height: 0.667rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/editPen.png") center no-repeat;
                    background-size: 80% 80%;
                    float: left;
                    font-size: 0.133rem;
                    margin-right: 0.08rem;
                   }
                   .itemWrap{
                    float: left;
                    width: 95%;
                    border: 0.013rem solid #999;
                    overflow: hidden;
                   }
                   .itemString{
                    width: 100%;
                   }
                   .insertBelow{
                    width: 0.2rem;
                    height: 0.2rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/numberincrease@2x.png");
                    background-size: 100%;
                    float: left;
                    font-size: 0.133rem;
                   }
                   .addAtHead{
                    width: 0.2rem;
                    height: 0.2rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/numberincrease@2x.png");
                    background-size: 100%;
                    float: left;
                    font-size: 0.133rem;
                   }
                </style>
    `
